<template>
    <div>
        <user-top :title="msg"></user-top>
        <div class="changeBody">
                <div class="people"><div class="peopleLeft"><div>大众版</div><div>查取快递包裹一应俱全，城市搬家跑腿随心体验</div></div>
                    <div class="people1">
                        <input id="people" type="radio" name="changes" value="people" checked="checkes">
                        <label for="people"></label>
                    </div>
                </div>
                <div class="people"><div class="peopleLeft"><div>家乡版</div><div>查取寄外还有超划算低价商品，乡村用户必选</div></div>
                    <div class="people1">
                        <input id="people" type="radio" name="changes" value="people">
                        <label for="people"></label>
                    </div>
                </div>
                <div class="people"><div class="peopleLeft"><div>校园版</div><div>查取寄外更多学生服务和福利，在校学生必选</div></div>
                    <div class="people1" @click="open">
                        <input id="people" type="radio" name="changes" value="people" >
                        <label for="people"></label>
                    </div>
                </div>
        </div>
    </div>
    
</template>

<script>
import UserTop from "@/components/userMine/usertop.vue"
export default {
    data () {
      return {
        radio: '1',
        bol:false,
        msg: '版本切换'
      };
    },
    components: {
         UserTop
    },
    methods: {
        open() {
            // this.$router.push("/");
            // this.$confirm('确定后将跳转至首页查看效果', '确定切换为家乡版', {
            // confirmButtonText: '好的',
            // cancelButtonText: '取消',
            // }).then(() => {
            //     this.bol = true;
            //     // this.$router.push("/");
            // }).catch(() => {

            // });
        },
        backClick(){
            this.$router.back(-1)
        }
    }
}
</script>

<style lang="scss" scoped>

.changeBody{
    .people{
        background-color: #fff;
        color: #333;
        line-height: 80px;
        padding-left: 15px;
        border-bottom: 1px solid #f1e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .peopleLeft{
            & div:nth-child(1){
                font-size: 28px;
                font-weight: 400;
                height: 35px;
            }
             & div:nth-child(2){
                font-size: 20px;
                color:#858887;
            }
            
        }
        input{
            margin-right: 15px;
        }
        .people1 input{
            -webkit-appearance: none;
            width: 40px;
            height: 40px;
            padding: 0;
            background-color: #fff;
            border: 1px solid #c9c9c9;
            border-radius: 50%;
            outline: none;
            margin-right: 22px;
            cursor: pointer;
        }
        .people1 input:checked{
            background: url('../../../assets/img/changeY.png') no-repeat center;
            background-size: 140%;
        }
    }
}
</style>